<template>
  <div class="login">
    <Header title="登录 - 个人数据银行" />
    <div class="top">
      <div class="img">头像</div>
    </div>
    <ul class="content">
      <li>
        <span>手机号</span>
        <input type="tel" placeholder="请输入手机号" />
      </li>
      <li>
        <span>密码</span>
        <input :type="isEeye ? 'text' : 'password'" placeholder="请输入密码" />
        <span
          :class="
            ['iconfont', isEeye ? 'icon-keshi' : 'icon-bukeshi', 'back'].join(
              ' '
            )
          "
          style="float:right"
          @click="isEeye = !isEeye"
        ></span>
      </li>
    </ul>
    <p class="linght tipSize">
      <router-link to="/ignorePwd" tag="span">忘记密码？</router-link>
      <router-link to="/quickLogin" tag="span">快速登录</router-link>
    </p>
    <div class="footer">
      <button class="btn">登录</button>
      <p>注册 ></p>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Header from "@/components/header.vue";
export default Vue.extend({
  data() {
    return {
      isEeye: true,
    };
  },
  components: {
    Header,
  },
});
</script>
<style scoped>
.btn {
  width: 90%;
}
.top {
  width: 100%;
}
.img {
  width: 100px;
  height: 100px;
  margin: 30px auto;
  border: 1px solid #eee;
  text-align: center;
  line-height: 100px;
}
.content li {
  padding: 12px 8px;
}

.tipSize {
  font-size: 14px;
  display: flex;
  margin: 15px 8px;
  justify-content: space-between;
}
.footer {
  width: 100%;
  text-align: center;
  font-size: 16px;
}
.footer p {
  margin-top: 15px;
}
</style>
